<template>
  <view class="panel brands">
    <view class="title">
      热门品牌
      <navigator hover-class="none" class="more" url="/pages/list/index"
        >更多</navigator
      >
    </view>
    <view class="cards">
      <navigator hover-class="none" url="/pages/goods/index">
        <image
          mode="aspectFit"
          src="http://static.botue.com/erabbit/static/uploads/brand_logo_1.jpg"
        ></image>
        <view class="name">小米</view>
        <view class="price">99元起</view>
      </navigator>
      <navigator hover-class="none" url="/pages/goods/index">
        <image
          mode="aspectFit"
          src="http://static.botue.com/erabbit/static/uploads/brand_logo_2.jpg"
        ></image>
        <view class="name">TCL</view>
        <view class="price">199起</view>
      </navigator>
      <navigator hover-class="none" url="/pages/goods/index">
        <image
          mode="aspectFit"
          src="http://static.botue.com/erabbit/static/uploads/brand_logo_3.jpg"
        ></image>
        <view class="name">饭小宝</view>
        <view class="price">9.9起</view>
      </navigator>
      <navigator hover-class="none" url="/pages/goods/index">
        <image
          mode="aspectFit"
          src="http://static.botue.com/erabbit/static/uploads/brand_logo_4.jpg"
        ></image>
        <view class="name">鳄鱼</view>
        <view class="price">299起</view>
      </navigator>
    </view>
  </view>
</template>

<style scoped lang="scss">
.brands{
  margin-top: 20px;
  .title{
    display: flex;
    justify-content: space-between;
    padding: 0  20px;
    font-size: 16px;
  }
  .cards{
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    navigator{
      text-align: center;
    }
    image{
      height: 72px;
      width: 72px;
    }
  }
}
.name{
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  padding-bottom: 5px;
  font-size: 12px;
  width: 72px;
}
.price{
  color: #999;
  font-size: 12px;
}
</style>